<template>
    <div>
        <h1>新增户型</h1>
        <table class="table">
            <tbody>
                <tr>
                    <th>户型名称</th>
                    <th>
                        <input type="text" v-model="data.Name">
                    </th>
                </tr>
                <tr>
                    <th>户型结构</th>
                    <th>
            <select v-model="data.TypeId">
                <option value="0">请选择</option>
                <option v-for="s in datatype" :value="s.TypeId">{{ s.TypeName }}</option>
            </select>
                    </th>
                </tr>
                <tr>
                    <th>建筑面积</th>
                    <th>
                        <input type="text" v-model="data.JM2">
                    </th>
                </tr>
                <tr>
                    <th>套内面积</th>
                    <th>
                        <input type="text" v-model="data.TM2">
                    </th>
                </tr>
                <tr>
                    <th>上传图片</th>
                    <th>
                        <input type="file" @change="Upfile">
                        <img :src="'https://localhost:7071/'+data.img" height="100" width="100" alt="">
                    </th>
                </tr>
                <tr>
                    <th colspan="2">
                        <input type="button" value="更新" @click="Update">
                    </th>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
    import { ref,onMounted } from 'vue';
    import axios from 'axios';
    import { useRoute,useRouter } from 'vue-router';
    const route = useRoute()
    const router = useRouter()
    const data = ref({
    "Id": 0,
    "Name": "",
    "TypeId": 0,
    "JM2": 0,
    "TM2": 0,
    "img": "",
    "isDel": true       
    })
    const datatype = ref([{
        "TypeId": 0,
        "TypeName": "0"
    }])
    onMounted(()=>{
        Type()
        Find()
    })
    const Type=()=>{
        axios.post("https://localhost:7071/api/Store/GetAllType").then(res=>{
            datatype.value = res.data
        })
    }
    const Find=()=>{
        var vid = route.query.id;
        axios.get("https://localhost:7071/api/Store/GetAll",{params:{id:vid}}).then(res=>{
            data.value = res.data
        })
    }
    const Upfile=(e:any)=>{
        var f = e.target.files[0]
        if(f.size>1*1024*1024){
            alert('照片不能超过1MB')
            return
        }
        if(f.type!="image/png"&&f.type!="image/jpeg"){
            alert('照片格式必须是PNG、JPG格式')
            return
        }
        var fd = new FormData
        fd.append("file",f)
        axios.post("https://localhost:7071/api/Store/UpFile",fd).then(res=>{
            data.value.img = res.data
        })
    }
    const Update=()=>{
        if(data.value.Name==""){
            alert('户型名称不能为空')
            return
        }
        if(data.value.TypeId==0){
            alert('请选择户型结构!')
            return
        }
        if(data.value.JM2==0){
            alert('建筑面积不能为空')
            return
        }
        if(data.value.TM2==0){
            alert('套内面积不能为空')
            return
        }
        if(data.value.JM2<60){
            alert('建筑面积不得小于60')
            return
        }
        if(data.value.JM2>300){
            alert('建筑面积不得大于300')
            return
        }
        if(data.value.JM2<data.value.TM2){
            alert('套内面积必须小于建筑面积')
            return
        }
        axios.post("https://localhost:7071/api/Store/UpdateStore",data.value).then(res=>{
            if(res.data>0){
                alert('更新成功')
                router.push({path:"/"})
            }
            else{
                alert('更新失败')
            }
        })
    }
</script>

<style scoped>

</style>